<template>
  <div class="add">
    <el-tabs type="border-card">
      <el-tab-pane :label="custodian">
        <div class="tab">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm box-top"
          >
            <el-form-item label="小区名称" prop="communityname">
              <el-input
                v-model="ruleForm.communityname"
                size="medium"
              ></el-input>
            </el-form-item>
            <el-form-item label="单元名称" prop="unitname">
              <el-input v-model="ruleForm.unitname" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="栋数" prop="unitnum">
              <el-input v-model="ruleForm.unitnum" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
              <el-select
                v-model="ruleForm.region"
                placeholder="请选择活动区域"
                size="medium"
              >
                <el-option label="已建成" value="1"></el-option>
                <el-option label="未建成" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 富文本 -->
          <template>
            <div class="ueditor">
              <span>咨询问候</span>
              <VueUeditorWrap
                style="height: 300px"
                class="ueditor-wrap"
                v-model="content"
                :config="editorConfig"
                @ready="onEditorReady"
              />
            </div>
          </template>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 按钮 -->
    <div class="btn-box">
      <el-button type="primary" icon="el-icon-d-arrow-left" @click="goBack"
        >返回</el-button
      >
      <el-button type="primary" icon="el-icon-finished" @click="save"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  components: {
    VueUeditorWrap,
  },
  data() {
    return {
      // 校验名称
      ruleForm: {
        communityname: "", // 小区名称
        unitname: "", // 单元名称
        unitnum: "", // 栋数
        region: "",
      },
      custodian: "用户管理",
      // 校验
      rules: {
        communityname: [
          { required: true, message: "小区名称不能为空", trigger: "blur" },
        ],
        unitname: [
          { required: true, message: "单元名称不能为空", trigger: "blur" },
        ],
        unitnum: [{ required: true, message: "栋数不能为空", trigger: "blur" }],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
      // 富文本
      content: "", // 编辑器的内容
      editorConfig: {
        // UEditor 的配置项
        UEDITOR_HOME_URL: "/ueditor/", // UEditor 文件的路径
        serverUrl: "", // 如果需要上传功能，配置服务器端接口
        toolbars: [
          [
            "fullscreen",
            "source",
            "undo",
            "redo",
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "blockquote",
            "insertorderedlist",
            "insertunorderedlist",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "link",
            "insertimage",
            "insertvideo",
            "emotion",
            "insertcode",
            "map",
            "horizontal",
            "time",
            "date",
            "spechars",
            "searchreplace",
            "preview",
            "drafts",
            "pasteplain",
            "removeformat",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "customstyle",
            "autotypeset",
            "paragraph",
            "fontfamily",
            "fontsize",
            "forecolor",
            "backcolor",
            "directionalityltr",
            "directionalityrtl",
            "indent",
            "outdent",
            "touppercase",
            "tolowercase",
            "inserttable",
            "deletetable",
            "insertrow",
            "insertcol",
            "mergeright",
            "mergedown",
            "deleterow",
            "deletecol",
            "splittorows",
            "splittocols",
            "splittocells",
            "mergecells",
            "charts",
          ],
        ],
        autoHeightEnabled: true,
        autoFloatEnabled: true,
      },
      token: localStorage.getItem("token"),
    };
  },
  methods: {
    // 富文本
    onEditorReady(editor) {
      console.log("编辑器已初始化", editor);
    },
    // 返回
    goBack() {
      this.$router.push({
        path: "/house/unit",
      });
    },
    // 保存
    save() {
      if (this.$route.query.id == undefined) {
        this.$confirm("此操作将保存该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          let a = await this.$axios
            .post("house/addunitList", {
              communityname: this.ruleForm.communityname,
              unitname: this.ruleForm.unitname,
              unitnum: 123,
              unitstatus: this.ruleForm.region,
              unitcontext: this.content,
              token: this.token,
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "添加成功!",
              });
              this.goBack();
            });
          console.log(a);
        });
      } else {
        this.$confirm("此操作将保存该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          let a = await this.$axios
            .post("/house/updateunitList", {
              communityname: this.ruleForm.communityname,
              unitname: this.ruleForm.unitname,
              unitnum: this.$route.query.unitnum,
              unitstatus: this.ruleForm.region,
              unitcontext: this.content,
              u_id: this.$route.query.id,
              token: this.token,
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "更新成功!",
              });
              this.goBack();
            });
          console.log(a);
        });
      }
    },
    // 判断
    judge() {
      if (this.$route.query.id != undefined) {
        this.custodian = "编辑用户";
        this.ruleForm.communityname = this.$route.query.communityname;
        this.ruleForm.unitname = this.$route.query.unitname;
        this.ruleForm.unitnum = this.$route.query.unitnum;
        this.ruleForm.region = this.$route.query.unitstatus;
        this.content = this.$route.query.content;
      }
    },
  },
  created() {
    this.judge();
  },
};
</script>

<style lang="scss" scoped>
.tab {
  width: 1300px;
  margin: 0 auto;
}
.box-top {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.el-input {
  width: 530px;
}
.el-select {
  width: 530px;
}
// 富文本
.ueditor {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.ueditor-wrap {
  width: 1200px;
  //   height: 800px !important;
}
// 按钮
.btn-box {
  width: 100px;
  height: 110px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-evenly;
  position: fixed;
  top: 45%;
  right: 1%;
}
.el-button {
  width: 80px;
  font-size: 14px;
}
</style>